<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="css/themes/zepter-theme.min.css" />
<link rel="stylesheet" href="css/idangerous.swiper.css">
<script defer src="js/idangerous.swiper-2.0.min.js"></script>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<meta charset="UTF-8">
<title>TicketMonster</title>
<script type="text/javascript">
/*======
Use document ready or window load events
For example:
With jQuery: $(function() { ...code here... })
Or window.onload = function() { ...code here ...}
Or document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)
=======*/

window.onload = function() {
  var mySwiper = new Swiper('.swiper-container',{
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
  });  
}

/*
Or with jQuery/Zepto
*/
$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //Your options here:
    pagination: '.pagination',
    mode:'horizontal',
    loop: true,
    grabCursor: true,
    keyboardControl: true,
    paginationClickable: true
    //etc..
  });
  $('.arrow-left').on('click', function(e){
	    e.preventDefault()
	    mySwiper.swipePrev()
	  })
	  $('.arrow-right').on('click', function(e){
	    e.preventDefault()
	    mySwiper.swipeNext()
	  })
})

</script>
</head>
<body>
	<div data-role="page" id="page-1" data-theme="a">
		<div data-role="header">
			<center>
				<img id="image-1" alt="" src="css/themes/images/zepterlogo.png"/ >
			</center>
		</div>
		<div data-role="content">
			<div class="device">

				<a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a>


				<div class="swiper-container">
					<div class="swiper-wrapper">

						<!--First Slide-->
						<div class="swiper-slide">
							<a href="..." class="rs-next"><img
								src="http://www.zepter.com/mm/blocks/data_en/01_medical.jpg" /></a>
						</div>

						<!--Second Slide-->
						<div class="swiper-slide">
							<!-- Any HTML content of the second slide goes here -->
							<a href="..." class="rs-prev"><img
								src="http://www.zepter.com/mm/blocks/data_en/02_taion.jpg" /></a>
						</div>

						<!--Third Slide-->
						<div class="swiper-slide">
							<!-- Any HTML content of the third slide goes here -->
							<a href="..."><img
								src="http://www.zepter.com/mm/blocks/data_en/04_quadra01.jpg" /></a>
						</div>
						<!--Etc..-->
					</div>
				</div>
				<div class="pagination"></div>
			</div>


		</div>
		<div data-role="footer">
			<h4>Page Footer</h4>
		</div>
	</div>
</body>
</html>